<template>
  <form @submit.prevent>
    <slot></slot>
    @submit.prevent点击提交按钮先验证，阻止默认提交
  </form>
</template>
<script>
export default {
  name: "el-form",
  provide() {//跨组件传递
    return { elForm: this };
  },
  props: {
    model: {
      type: Object,
      default: () => ({}), //保证组件间的数据都是独立的
    },
    rules: Object,
  },
  mounted(){
    console.log(1,this._provided)//暴露
  },
  methods: {
    async validateEF(cb) {
      //看一下所有的form-item是否符合规范
      //调用一下所有的form-item validate方法，看是否通过
      let children = this.$children;
      let arr = [];
      function findFormItem(children) {
        children.forEach((child) => {
          if (child.$options.name === "el-form-item") {
            arr.push(child);
          }
          if (child.$children) {
            findFormItem(child.$children);
          }
        });
      }
      findFormItem(children);
      // console.log(arr)

      // 也可以用自定义方法
      // let arr = this.$broadcast(null,'el-form-item')
      
      try {
        //await等待promise都完成之后才去调cb
        await Promise.all(arr.map((child) => child.validate()));
        cb(true);//验证通过调用父组件传入的回调函数
      } catch {
        cb(false);//验证失败调用父组件传入的回调函数
      }
    },
    resetFields(){
      //清空输入框 .async  v-model  找到输入框清理
    }
  },
};
</script>